<template>
      <el-row class="warp">
        <el-col class="publicNav" :span="3" style="height:100%;">
            <router-link :to="{path:'/layout/alarm'}">告警参数设置</router-link>
            <router-link class="newnava" :to="{path:'/layout/contacts'}">联系人设置</router-link>
            <router-link :to="{path:'/layout/alarmtest'}">用户测试</router-link>
        </el-col>
        <el-col :span="21" style="height:100%;">
              <el-row>
                <el-col :span="24">
                  <div class="contacts-main" >
                      <div class="contacts-main-header">
                        <span class="contacts-header-name">
                          用户联系人设置
                        </span>
                      </div>
                      <div class="contactswarp">
                          <div class="contactsheader">
                            联系人一
                          </div>
                          <template>
                            <ul>
                                <li>
                                    <span>联系人姓名:</span>
                                    <el-input size="mini" v-model="masteruser_name" placeholder="请输入内容"></el-input>
                                </li>
                                <li>
                                  <span>联系人电话:</span>
                                  <el-input size="mini" v-model="masteruser_mobile" placeholder="请输入内容"></el-input>
                                </li>
                            </ul>
                          </template>
                      </div>
                      <div class="contactswarp">
                            <div class="contactsheader">
                              联系人二
                            </div>
                            <template>
                              <ul>
                                <li>
                                    <span>联系人姓名:</span>
                                    <el-input size="mini" v-model="user_name" placeholder="请输入内容"></el-input>
                                </li>
                                <li>
                                  <span>联系人电话:</span>
                                  <el-input size="mini" v-model="user_mobile" placeholder="请输入内容"></el-input>
                                </li>
                            </ul>
                            </template>
                        </div>
                        <div class="button-box" style="">
                              <el-button type="primary" size="mini" @click="save_info">保存</el-button>
                        </div>
                      </div>
                </el-col>
              </el-row>
        </el-col>
      </el-row>
</template>

<script>

export default {
  name: 'contacts',
  data () {
    return {
          masteruser_name:"",
          masteruser_mobile:'',
          user_name:"",
          user_mobile:'',
          name:''
    }
  },
  methods:{
    get_pwd(){
        let  pwd; 
        $.ajax({
            url:'../cfg/password.json',
            type:'GET',
            cache:false,
            async: false,
            dataType:'text',
            success:function(result){
                let data = eval("("+result+")");
                pwd = data.password;
            },
            error:function(realdata){                           
            }
        })
        return pwd;
    },
    check_pwd(){
        let username = window.sessionStorage.getItem('username');
        let password = window.sessionStorage.getItem('password');
        let pwd = this.get_pwd();
        if(username == "admin"){
            if(password != pwd){
                this.$message({
                    message: '密码做了更改,请重新登录!',
                    type: 'info',
                    center:true,
                    showClose: true
                });
                this.loginout();
            }
        } 
    },
    loginout(){
        window.sessionStorage.removeItem("username");
        window.sessionStorage.removeItem("password");
        
        this.set_log("用户退出");
        this.$router.push("/login");
    },
    set_log(str){//用户操作日志
        let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
        $.ajax({
            url:"cgi-bin/main.cgi",
            contentType: "application/json;charset=utf-8",
            type:"post",
            data:JSON.stringify(msg),
            success:function(msg){           
            }
        })
    },
    //获取联系人信息
    get_userinfo(){
        let that = this;
        let msg = {"cmd":"CGI_ALARM_GET_CONTACT"};
        this.$ajax.post("./cgi-bin/main.cgi",msg).then(function(res){
            //数据对象是否存在,根据长度(res.data.length)来判断存在多少组数据
            that.$data.masteruser_name = res.data[0].name;
            that.$data.masteruser_mobile= res.data[0].number;
            that.$data.user_name = res.data[1].name;
            that.$data.user_mobile = res.data[1].number;
        })
    },
    save_info(){
        //保存联系人发送给后台数据
        let that=this;
        

        let phone_test = /^[1][3,4,5,7,8,9][0-9]{9}$/; 

        let master_name = this.$data.masteruser_name;
        let master_num  = this.$data.masteruser_mobile;
        let user_name   = this.$data.user_name;
        let user_num    = this.$data.user_mobile;
        let msg = "";

        if(master_name=="" || master_num==""){//联系人一  信息不完整
             //需要保证联系人二 信息的完整准确
             if(user_name == "" || phone_test.test(user_num) == false){
                that.$message({
                    type: 'error',
                    message: '请检查填写信息是否正确!'
                });
                return false;
             }else{
                msg = {"cmd":"CGI_ALARM_SET_CONTACT","contact":[{"name":user_name,"number":user_num}]};
             }
        }

        if(user_name =="" || user_num=="" ){//联系人二  信息不完整
             //需要保证联系人二 信息的完整准确
             if(master_name == "" || phone_test.test(master_num) == false){
                that.$message({
                    type: 'error',
                    message: '请检查填写信息是否正确!'
                });
                return false;
             }else{
                msg = {"cmd":"CGI_ALARM_SET_CONTACT","contact":[{"name":master_name,"number":master_num}]};
             }
        }

        if(master_name !="" && phone_test.test(master_num) == true && user_name !="" && phone_test.test(user_num) == true){
            msg = {"cmd":"CGI_ALARM_SET_CONTACT","contact":[{"name":master_name,"number":master_num},{"name":user_name,"number":user_num}]};
        } else {
            that.$message({
              type: 'error',
              message: '请检查填写信息是否正确!'
            });
            return false;
        }

        this.$ajax.post("./cgi-bin/main.cgi",msg).then(function(res){
            if( res.data.response==true){
                that.$message({
                  type: 'success',
                  message: '保存成功'
                });
            }else{
                that.$message({
                    type: 'error',
                    message: '保存失败'
                });
            }
        })
      }
    },
    created(){
      this.check_pwd();
      this.get_userinfo();   
    }
}
</script>
<style scope>
  .contacts{
    width:100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    padding: 10px 0px;
  }
  .contacts button{
    letter-spacing: 2px;
    font-size: 12px;
    width: 70px;
  }
  .contacts-main{
    width: 700px;
    overflow: hidden;
    margin: auto;
    margin-top: 8%;
    padding: 30px 20px 40px;
    border: 1px solid #dcdfe6;
    border-radius: 15px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  }
  .contacts-main-header{
    width:100%;
    height:40px;
    line-height:40px;
     background: #409EFF;
    /* background: #e5e9f2; */
    margin-bottom:20px;
    border-radius:5px;
  }
  .contacts-main-header .contacts-header-name{
    display:block;
    width:150px;
    text-align: right;
    font-size: 16px;
    letter-spacing:2px;
    color:#fff;
    font-weight: 600;
    font-family:Microsoft YaHei;
    float:left;
  }
  .contacts-main-header .el-button{
    float:right;
    margin-right: 20px;
    margin-top: 6px;
    font-size: 14px;
  }
  .contactswarp{
    width:300px;
    height:200px;
    background:#f5f5f5;
    border-radius:10px;
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
    margin-left:35px;
  }
  .contactsheader{
    text-align: center;
    height:40px;
    line-height:40px;
    /*background: #66b1ff;*/
    background: #409EFF;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 15px;
  }
  .contactswarp ul {
    width: 100%;
    height: auto;
    background: #fff;
  }
  .contactswarp ul li{
    width: 100%;
    height: 53px;
    border-bottom: 1px solid #ebeef5;
    line-height: 53px;
    padding: 16px 0px;
  }
  .contactswarp ul li:hover{
    background: #ebeef5;
  }
  .contactswarp ul li span{
    display: block;
    float: left;
    width: 120px;
    height: auto;
    text-align: center;
    font-size: 14px;
    color: #666;
  }
  .contactswarp ul li .el-input{
    float: left;
    width: 160px;
  }
  .alamnav{
  background: #f2f2f2;
  }
  .alamnav a{
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #000;
    text-align: center;
    background: none;
  }
  .alamnav a:hover{
      background: #0080c0;
      cursor: pointer;
      color: #fff;
  }
.contacts .el-table--border::after, .el-table--group::after, .el-table::before{
  z-index: 0;
}
.contacts-main .button-box{
    width:100%;
    text-align:center;
    margin-top:20px;
    overflow:hidden;
    height:40px;
    overflow:hidden;
    line-height:40px;
    margin-top:20px;
    float:left
}
</style>
